<template>
    <!-- 二维码登入 -->
    <div class="erwei">
        <div class="img" v-loading="loading">
            <img width="200px" alt="" :src="qrImg" />
            <i class="mask" v-if="showQrMask" :style="maskBg" @click="updateQr"></i>
        </div>
        <p>
            <svg aria-hidden="true" class="icon-wx">
                <use xlink:href="#icon-weixin"></use>
            </svg>
            <b>扫描二维码</b>
        </p>
    </div>
</template>
<script>
//引入socket.io
import socketIo from "socket.io-client"
//引入qrcode
import qrcode from "qrcode"
//引入api
import * as api from "@/api/users"
//引入成功和失败扫码遮罩图片
import invalidImg from "@/assets/img/invalidQr.png"
import scanSuccessImg from "@/assets/img/scancode.png"
import storage from "@/utils/storage"
export default {
    props: {
        storageUserInfo: {
            required: true
        }
    },
    data() {
        return {
            //二维码图片
            qrImg: "",
            //是否显示遮罩
            showQrMask: false,
            //遮罩背景样式
            maskBg: { backgroundImage: `url(${scanSuccessImg})` }, //扫码成功
            // maskBgInvalid: { background: url(invalidImg) } //二维码失效
            loading:true
        }
    },
    created() {
        // console.log(this.storageUserInfo)
        //建立socket连接
        let io = socketIo('wss://chst.vip')
        //监听连接的事件
        io.on('connectSuccess', async ({ sid }) => {
            //将sid存到本地
            storage.set('qf-sid', sid)

            this.getQrUrl(sid)
        })
        //无效二维码
        io.on("invalidCode", data => {
            // console.log(data)
            //展示遮罩
            this.showQrMask = true;
            //显示无效的二维码遮罩样式
            this.maskBg.backgroundImage = `url(${invalidImg})`
        })
        //扫码成功
        io.on('scancodeSuccess', async ({ state, wechatCode, msg }) => {
            // console.log(wechatCode)
            //扫码成功显示遮罩
            this.showQrMask = true
            this.maskBg.backgroundImage = `url(${scanSuccessImg})`
            if (state) {
                //调用微信登入的接口
                let res = await api.wechatLoginApi(wechatCode);
                //将内容存到本地
                this.storageUserInfo(res.data)
                // console.log(res)
                //跳转页面
                this.$router.push("/")
            } else {
                console.error(msg)
            }

        })
    },
    methods: {
        async getQrUrl(sid) {
            //打开加载动画
            this.loading = true;
            //请求获取二维码地址
            let res = await api.getQrCodeApi(sid);
            // console.log(res)
            let { scanCodeUrl: qrcodeUrl } = res.data;
            //通过qrcode插件,生成二维码
            qrcode.toDataURL(qrcodeUrl, (err, img) => {
                if (err) {
                    throw err
                }
                // console.log(img)
                this.qrImg = img;

                //关掉遮罩
                this.showQrMask = false;
                //关掉loading动画
                this.loading = false;
            })

        },
        //更新二维码地址
        updateQr() {
            //获取本地存储的sid
            let sid = storage.get('qf-sid')
            console.log(sid)
            this.getQrUrl(sid)
        }
    }
}
</script>
<style scoped lang="less">
//样式设置不上的情况,解决方案
//1.检查类名是否正确
//2.检查权重是否正确
//3.检查是否需要穿透
.icon-wx {
    width: 25px !important;
    height: 25px !important;
    vertical-align: -7px;
    margin-right: 3px;
}

.login-container {
    text-align: center;
    color: #fff;

    .common-login {
        padding-right: 50px;
    }

    //二维码样式
    .erwei .img {
        display: inline-block;
        position: relative;
        width: 200px;
        height: 200px;

        img {
            position: absolute;
            left: 0;
        }

        .mask {
            width: 100%;
            height: 100%;
            opacity: 0.8;
            background-color: #fff;
            position: absolute;
            left: 0;
            // background-image: url("../../assets/img/scancode.png");
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
        }
    }

    .jiaobiao {
        font-size: 60px;
        color: #fff;
        position: absolute;
        right: -1px;
        top: -1px;
        cursor: pointer;
        opacity: 0.7;
    }

    .video {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

    .bg2 {
        background-image: url("../../assets/img/bg2.png");
        background-repeat: no-repeat;
        position: fixed;
        width: 20%;
        height: 40%;
        background-size: 100% 100%;
        left: 20%;
        top: 40%;
        opacity: 0.5;
    }

    .el-form {
        position: fixed;
        right: 10%;
        top: 25%;
        border-radius: 5px;
        width: 400px;
        background-color: rgba(0, 0, 0, 0.3);
        padding: 100px 0 50px 0;

        /deep/ .el-input__inner {
            width: 250px;
        }

        /deep/ .el-button--primary {
            background: linear-gradient(90deg, #1596fb, #002dff);
            width: 250px;
        }

        /deep/ .el-form-item__label {
            color: #fff;
        }

        .title {
            margin: 0 0 60px 0;
            text-align: center;
            color: #fff;
        }

        /deep/ .captcha {
            width: 100px;
            vertical-align: top;

            .el-input__inner {
                width: 100%;
                height: 45px;
                border-radius: 5px 0 0 5px;
                border: 0;
                font-size: 18px;
            }
        }

        svg path {
            stroke: red;
        }

        .captcha-svg {
            background: #fff;
            display: inline-block;
            height: 45px;
            width: 150px;
            text-align: center;
            cursor: pointer;
            border: 0;
            border-radius: 0px 5px 5px 0;
        }

        .el-form-item__content {
            margin-left: 30px !important;
            width: 250px !important;
        }
    }
}

.sms {
    margin-left: -15px !important;
    width: 250px !important;
}

.smsContainer {
    padding-right: 20px !important;
    width: 89%;

    /deep/ .el-form-item__label {
        // margin-left: 80px !important
        padding: 0 !important;
        padding-right: 10px !important;
    }

    /deep/ .phone {
        width: 140px !important;
    }

    /deep/ .captcha-svg {
        width: 115px !important;
    }

    /deep/ .el-form-item__content {
        margin: 0;
    }
}

// .smsContainer{
// 	width:300px;
// }
</style>